<template>
  <div class="basic-edit-container">
    <el-form
      ref="formRef"
      :model="dataForm"
      :rules="dataRules"
      label-width="160px"
      style="display: inline-block; width: 100%"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <div class="baseBox">
            <div class="baseBoxLeft">
              <el-form-item label="摄像头名称：" prop="videoinfo.name">
                <el-input v-model="dataForm.videoinfo.name"></el-input>
              </el-form-item>
              <el-form-item label="摄像头编号：" prop="videoinfo.channelId">
                <el-input v-model="dataForm.videoinfo.channelId"></el-input>
              </el-form-item>
              <el-form-item label="区域归属：" prop="videoinfo.regionCode">
                <el-select
                  class="select-width"
                  v-model="dataForm.videoinfo.regionCode"
                  placeholder="请选择区域归属"
                  clearable
                >
                  <el-option
                    v-for="item in regionList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属河流：" prop="videoinfo.riverId">
                <el-select
                  class="select-width"
                  v-model="dataForm.videoinfo.riverId"
                  placeholder="请选择所属河流"
                  clearable
                >
                  <el-option
                    v-for="item in riverList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="摄像头类型：" prop="videoinfo.cameraType">
                <el-radio-group v-model="dataForm.videoinfo.cameraType">
                  <el-radio label="1">枪机</el-radio>
                  <el-radio label="2">球机</el-radio>
                  <el-radio label="3">半球</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="经纬度：" prop="gpsY">
                <input
                  type="number"
                  class="jwd_input"
                  v-model.number="dataForm.videoinfo.gpsX"
                  placeholder="请输入经度"
                />
                <input
                  type="number"
                  class="jwd_input"
                  v-model.number="dataForm.videoinfo.gpsY"
                  placeholder="请输入纬度"
                />
                <el-button type="primary" @click="mapClick">地图选点</el-button>
              </el-form-item>
              <el-form-item
                label="摄像头所属分类："
                prop="videoinfo.deviceType"
              >
                <my-single-tree-select
                  :dataTree="deviceTypeList"
                  :selectedSingleId.sync="typeId"
                  :selectedSingleValue.sync="dataForm.videoinfo.deviceType"
                />
              </el-form-item>
              <el-form-item label="摄像头所属具体分类：" prop="subType">
                <el-autocomplete
                  class="inline-input"
                  v-model="dataForm.videoinfo.subType"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  @select="handleSelect"
                ></el-autocomplete>
              </el-form-item>
              <el-form-item class="form-btn-box">
                <el-button type="primary" @click="onSubmit">保 存</el-button>
                <el-button @click="onCancel">取 消</el-button>
              </el-form-item>
            </div>
            <div class="rightMap">
              <emapOnline
                id="emap"
                ref="emap"
                @map-object="initMap"
              ></emapOnline>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="扩展信息" name="second">
          <div class="expandBox">
            <el-form-item label="设备厂商：" prop="deviceid">
              <el-select
                class="select-width"
                v-model="dataForm.videoinfo.deviceid"
                placeholder="请选择设备厂商"
                clearable
              >
                <el-option
                  v-for="item in manufacturerList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备型号：" prop="deviceSn">
              <el-input v-model="dataForm.videoinfo.deviceSn"></el-input>
            </el-form-item>
            <el-form-item label="隶属单位：" prop="orgType">
              <el-input v-model="dataForm.videoinfo.orgType"></el-input>
            </el-form-item>
            <el-form-item label="负责人：" prop="leader">
              <el-input v-model="dataForm.videoinfo.leader"></el-input>
            </el-form-item>
            <el-form-item label="安装详细位置：" prop="address">
              <el-input
                type="textarea"
                :rows="3"
                v-model="dataForm.videoinfo.address"
              ></el-input>
            </el-form-item>
            <el-form-item class="form-btn-box">
              <el-button type="primary" @click="onSubmit">保 存</el-button>
              <el-button @click="onCancel">取 消</el-button>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="视频接入" name="third">
          <div class="ingressBox">
            <div class="same-item-first">
              <el-radio
                class="radioSty"
                v-model="dataForm.accessinfo.accesstype"
                label="1"
                >有线接入</el-radio
              >
              <div class="same-three">
                <el-form-item label="摄像头厂商：" prop="deviceid">
                  <el-select
                    class="select-width"
                    v-model="dataForm.accessinfo.deviceid"
                    placeholder="请选择摄像头厂商"
                    clearable
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  >
                    <el-option
                      v-for="item in manufacturerList"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="通道编号：" prop="channelcode">
                  <el-input
                    v-model="dataForm.accessinfo.channelcode"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="same-three">
                <el-form-item label="摄像头ip：" prop="channelip">
                  <el-input
                    v-model="dataForm.accessinfo.channelip"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="端口：" prop="channelport">
                  <el-input
                    v-model="dataForm.accessinfo.channelport"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="same-three">
                <el-form-item label="登录账号：" prop="channelname">
                  <el-input
                    v-model="dataForm.accessinfo.channelname"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="登陆密码：" prop="channelpassword">
                  <el-input
                    v-model="dataForm.accessinfo.channelpassword"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
                <div style="margin-left: 90px">
                  <el-button
                    style="height: 30px"
                    type="primary"
                    @click="artemisVideoLogin"
                    >测试</el-button
                  >
                </div>
              </div>
              <div class="same-three">
                <el-form-item label="NVR：" prop="nvrip">
                  <el-input
                    v-model="dataForm.accessinfo.nvrip"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="端口：" prop="nvrport">
                  <el-input
                    v-model="dataForm.accessinfo.nvrport"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="same-three">
                <el-form-item label="登陆账号：" prop="nvrname">
                  <el-input
                    v-model="dataForm.accessinfo.nvrname"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="登陆密码：" prop="nvrpassword">
                  <el-input
                    v-model="dataForm.accessinfo.nvrpassword"
                    :disabled="dataForm.accessinfo.accesstype !== '1'"
                  ></el-input>
                </el-form-item>
                <div style="margin-left: 90px">
                  <el-button style="height: 30px" type="primary"
                    >测试</el-button
                  >
                </div>
              </div>
            </div>
            <div class="same-item-second">
              <el-radio
                class="radioSty"
                v-model="dataForm.accessinfo.accesstype"
                label="2"
                >国际接入</el-radio
              >
              <div class="same-three">
                <el-form-item label="设备编码：" prop="devicecode">
                  <el-input
                    v-model="dataForm.accessinfo.devicecode"
                    :disabled="dataForm.accessinfo.accesstype !== '2'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="通道编码：" prop="channelcode">
                  <el-input
                    v-model="dataForm.accessinfo.channelcode"
                    :disabled="dataForm.accessinfo.accesstype !== '2'"
                  ></el-input>
                </el-form-item>
                <div style="margin-left: 90px">
                  <el-button
                    style="height: 30px"
                    type="primary"
                    @click="gbVideoPreview"
                    >测试</el-button
                  >
                </div>
              </div>
            </div>
            <div class="same-item-third">
              <el-radio
                class="radioSty"
                v-model="dataForm.accessinfo.accesstype"
                label="3"
                >视频平台接入</el-radio
              >
              <div class="same-three">
                <el-form-item label="摄像头厂商：" prop="deviceid">
                  <el-select
                    class="select-width"
                    v-model="dataForm.accessinfo.deviceid"
                    placeholder="请选择摄像头厂商"
                    clearable
                    :disabled="dataForm.accessinfo.accesstype !== '3'"
                  >
                    <el-option
                      v-for="item in manufacturerList"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主机地址：" prop="host">
                  <el-input
                    v-model="dataForm.accessinfo.host"
                    :disabled="dataForm.accessinfo.accesstype !== '3'"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="same-three">
                <el-form-item label="APPKEY：" prop="appkey">
                  <el-input
                    v-model="dataForm.accessinfo.appkey"
                    :disabled="dataForm.accessinfo.accesstype !== '3'"
                  ></el-input>
                </el-form-item>
                <el-form-item label="APPSECRET：" prop="appsecret">
                  <el-input
                    v-model="dataForm.accessinfo.appsecret"
                    :disabled="dataForm.accessinfo.accesstype !== '3'"
                  ></el-input>
                </el-form-item>
                <div style="margin-left: 90px">
                  <el-button
                    style="height: 30px"
                    type="primary"
                    @click="getVideoPlaform"
                    >测试</el-button
                  >
                </div>
              </div>
            </div>
            <div class="same-item-forth">
              <el-radio
                class="radioSty"
                v-model="dataForm.accessinfo.accesstype"
                label="4"
                >视频流地址接入</el-radio
              >
              <div class="same-two">
                <el-form-item label="实时预览：" prop="liveurl">
                  <el-input
                    class="select-width"
                    v-model="dataForm.accessinfo.liveurl"
                  ></el-input>
                </el-form-item>
                <div style="margin-left: 40px">
                  <el-button style="height: 30px" type="primary"
                    >测试</el-button
                  >
                </div>
              </div>
              <div class="same-two">
                <el-form-item label="视频回放：" prop="channelName">
                  <!-- 回访字段待定 -->
                  <el-input
                    class="select-width"
                    v-model="dataForm.accessinfo.liveurl"
                  ></el-input>
                </el-form-item>
                <div style="margin-left: 40px">
                  <el-button style="height: 30px" type="primary"
                    >测试</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="OSD" name="fourth">
          <div class="osdBox">
            <el-form-item label="显示标题：" prop="osdtitle">
              <el-input v-model="dataForm.accessinfo.osdtitle"></el-input>
            </el-form-item>
            <el-form-item label="视频叠加：">
              <el-select
                class="select-width"
                v-model="dataForm.accessinfo.segmentcategory"
                placeholder="请选择叠加"
                clearable
              >
                <el-option
                  v-for="item in waterSourceList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联断面：" prop="osdsegmentid">
              <el-select
                class="select-width"
                v-model="dataForm.accessinfo.osdsegmentid"
                placeholder="请选择关联断面"
                clearable
              >
                <el-option
                  v-for="(item, index) in segList"
                  :key="index"
                  :label="item.segmentName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="监测因子：">
              <el-checkbox-group v-model="dataForm.iteminfo">
                <el-checkbox
                  v-for="item in codeList"
                  :key="item.ID"
                  :label="item.ID"
                  border
                  >{{ item.CNName }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="视频预览时显示：" prop="liveshow">
              <el-radio-group v-model="dataForm.accessinfo.liveshow">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="数据超标是自动录像：" prop="autorecord">
              <el-radio-group v-model="dataForm.accessinfo.autorecord">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="自动录像时长（秒）：" prop="timelong">
              <el-input v-model="dataForm.accessinfo.timelong"></el-input>
            </el-form-item>
            <el-form-item class="form-btn-box">
              <el-button type="primary" @click="onSubmit">保 存</el-button>
              <el-button @click="onCancel">取 消</el-button>
            </el-form-item>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
// import {
//   updateChannel,
//   getTree,
//   getUrl,
//   segmentList,
//   video_manufacturer,
//   selectItemsList,
//   selectChannelById,
//   artemisVideoLogin,
//   gbVideoPreview,
//   getVideoPlaform,
// } from "@/api/video/basicInformationApi.js";
import MySingleTreeSelect from "@/components/MySingleTreeSelect/index.vue";
export default {
  name: "EditView",
  components: {
    MySingleTreeSelect,
  },
  watch: {
    typeId: {
      handler(newVal, oldVal) {
        let linArr = this.parentIDList.filter((item) => newVal === item.id);
        if (linArr[0]?.url) {
          // 选择的数据
          this.getUrl(linArr[0].url);
        } else {
          // 空就完了
          this.subTypeList = [];
        }
      },
      deep: true,
    },
    "dataForm.accessinfo.segmentcategory": {
      handler(newVal, oldVal) {
        console.log(newVal);
        this.segmentList(newVal);
      },
    },
  },
  props: {
    dialogVisibleUse: {
      type: Boolean,
      default: false,
    },
    editDataId: {
      type: String,
      default: "",
    },
    regionList: {
      type: Array,
      default: () => {},
    },
    riverList: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      activeName: "first",
      timeout: null,
      typeId: "",
      subTypeId: "",
      subTypeName: "",
      parentIDList: [],
      dataForm: {
        videoinfo: {
          name: "", // 摄像头名字
          channelId: "",
          regionCode: "",
          riverId: "",
          cameraTypeStr: "",
          // status: "",
          gpsX: "",
          gpsY: "",
          // aianalysis: "",
          deviceTypeCode: "",
          deviceType: "",
          subTypeCode: "",
          subType: "",
          // 设备信息
          deviceid: "", // 设备厂商
          deviceSn: "", // 设备型号
          orgType: "", // 隶属单位
          leader: "", //负责人
          address: "", //安装详细地址
        },
        // 因子信息
        iteminfo: [],
        // 接入信息
        accessinfo: {
          // 有线接入
          deviceid: "", // 摄像头厂商 （视频平台公用）
          channelcode: "", // 通道编号 （国际公用）
          accesstype: "1", // 默认有线接入
          channelip: "", // 摄像头ip
          channelport: "", // 端口
          channelname: "", // 登陆账号
          channelpassword: "",
          nvrip: "",
          nvrport: "",
          nvrname: "",
          nvrpassword: "",
          // 国际接入
          devicecode: "", // 设备编码
          // 视频平台接入
          host: "", // 主机地址
          appkey: "",
          appsecret: "",
          // 视频流地址接入
          liveurl: "", // 实时地址
          // osd
          osdtitle: "", // 显示标题
          segmentcategory: "",
          osdsegmentid: "", // 关联断面
          liveshow: "1", // 视频预览时显示
          autorecord: "1", // 数据超标是自动录像
          timelong: "", // 自动录像持续时长
        },
      },
      // 非空校验规则
      dataRules: {
        // 修改校验规则字段名与嵌套对象字段匹配
        "videoinfo.name": [
          {
            required: true,
            message: "请输入摄像头名称",
            trigger: "blur",
          },
        ],
        "videoinfo.channelId": [
          {
            required: true,
            message: "请输入摄像头编号",
            trigger: "blur",
          },
        ],
        "videoinfo.regionCode": [
          {
            required: true,
            message: "请选择区域归属",
            trigger: "change",
          },
        ],
        "videoinfo.cameraType": [
          {
            required: true,
            message: "请选择摄像头类型",
            trigger: "change",
          },
        ],
        "videoinfo.deviceType": [
          {
            required: true,
            message: "请选择摄像头所属分类",
            trigger: "change",
          },
        ],
        // 可以根据需要添加更多嵌套对象字段的校验规则
      },
      deviceTypeList: [],
      subTypeList: [],
      allLayer: [
        "53bec3a750b54da4bd6f60b89f4d6f5b",
        "33523183bc934988b58ea08088bdf480",
        "3e8cd836639c4c99b7482b56d2eefee5",
      ],
      mapClickShow: false,
      map_popover: null,
      map: null,
      // 扩展的信息------
      // 视频接入--------
      manufacturerList: [],
      // osd----------
      segList: [],
      // 视频叠加
      // 1河流，2湖库，3地下水（1，2都是地表水）
      waterSourceList: [
        { name: "地表水", code: "1" },
        { name: "地下水", code: "3" },
      ],
      codeList: [],
    };
  },
  created() {
    if (this.editDataId) {
      this.selectChannelById();
    }
    this.getTree();
    this.video_manufacturer();
    this.selectItemsList();
  },
  beforeCreate() {
    this.$router.push({
      query: {
        id: this.mapLayer.projectID,
        type: "2D",
      },
    });
  },
  methods: {
    // 弹框tab
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 地图相关
    initMap(map) {
      this.map = map;
      let mapControlsMapTools = document.querySelector("#mapControlsMapTools");
      mapControlsMapTools.style.display = "none";
      let emap_baseMapChange = document.querySelector(".emap_baseMapChange");
      emap_baseMapChange.style.display = "none";
      this.allLayer.forEach((item, index) => {
        setTimeout(() => {
          this.$refs.emap.setLayerVisibility(item, false);
        }, index * 70);
      });
      map.on("click", (e) => {
        this.dataForm.gpsX = e.lngLat.lng.toFixed(6);
        this.dataForm.gpsY = e.lngLat.lat.toFixed(6);
        this.mapClickShow = false;
        this.map_popover.remove();
        this.map_popover = null;
        this.map.getCanvas().style.cursor = "";
        this.addPoint(
          Number(e.lngLat.lng.toFixed(6)),
          Number(e.lngLat.lat.toFixed(6))
        );
      });
      map.on("mousemove", (e) => {
        if (this.mapClickShow) {
          const coordinates = [e.lngLat.lng, e.lngLat.lat];
          const description = "点击地图选点";
          if (this.map_popover) {
            this.map_popover.remove();
          }
          console.log(coordinates);
          this.map_popover = new mapboxgl.Popup({
            closeButton: false,
            offset: [10, 0],
          })
            .setLngLat(coordinates)
            .setHTML(description)
            .addTo(map);
        }
      });
    },
    mapClick() {
      this.mapClickShow = true;
      this.map.getCanvas().style.cursor = "pointer";
    },
    addPoint(lon, lat) {
      if (this.map.getSource("point")) {
        this.map.getSource("point").setData({
          type: "Point",
          coordinates: [lon, lat],
        });
      } else {
        this.map.addSource("point", {
          type: "geojson",
          data: {
            type: "Point",
            coordinates: [lon, lat],
          },
        });
      }

      this.map.addLayer({
        id: "point",
        source: "point",
        type: "circle",
        paint: {
          "circle-radius": 10,
          "circle-color": "#007cbf",
        },
      });
    },
    // 视频分类
    // async getTree() {
    //   const { state, data, message } = await getTree({
    //     level: 1,
    //   });
    //   if (state === 1) {
    //     this.deviceTypeList = [data]; //包装成数组树
    //     this.parentIDList = this.treeToArr([data]); // 转化成一维数组
    //   } else {
    //     this.$message({
    //       message: message,
    //       type: "error",
    //     });
    //   }
    // },
    // 请求下拉框数据
    // async getUrl(url) {
    //   this.subTypeList = [];
    //   let queryUrl = `/video_api${url}`;
    //   const { code, data } = await getUrl(queryUrl);
    //   if (code === 200) {
    //     data.map((item) => {
    //       this.subTypeList.push({
    //         id: item.code,
    //         value: item.name, //这个必须是value
    //       });
    //     });
    //   }
    // },
    // 将树型数据数组化
    treeToArr(data) {
      return data.reduce((res, { id, name, level, url, children }) => {
        res.push({ id, level, name, url });
        if (children && children.length) {
          res = [...res, ...this.treeToArr(children, id)];
        }
        return res;
      }, []);
    },
    handleSelect(item) {
      this.dataForm.subType = item.value;
      this.subTypeId = item.id ? item.id : "";
      this.subTypeName = item.value ? item.value : "";
    },
    querySearch(queryString, cb) {
      var subTypeList = this.subTypeList;
      var results = queryString
        ? subTypeList.filter(this.createStateFilter(queryString))
        : subTypeList;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
      // 调用 callback 返回建议列表的数据
      cb(subTypeList);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    // 界面上保存按钮
    onSubmit() {
      let videoinfo = {
        deviceTypeCode: this.typeId,
        subType: this.subTypeName
          ? this.subTypeName
          : this.dataForm.videoinfo.subType,
        subTypeCode: this.subTypeId,
        ...this.dataForm.videoinfo,
      };
      let accessinfo = {
        ...this.dataForm.accessinfo,
      };
      let iteminfo = [...this.dataForm.iteminfo];
      let queryData = {
        videoinfo,
        iteminfo,
        accessinfo,
      };
      console.log(queryData, "这究竟是啥啊");
      this.updateChannel(queryData);
    },
    // 提交给接口并重置
    async updateChannel(queryData) {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // const { state, message } = await updateChannel(queryData);
          // if (state === 1) {
          //   this.$message({
          //     message: message,
          //     type: "success",
          //   });
          //   this.$emit("update:dialogVisibleUse", false);
          //   this.$emit("getListNew");
          // } else {
          //   this.$message({
          //     message: message,
          //     type: "error",
          //   });
          // }
        } else {
          console.log("没生效");
        }
      });
    },
    // 关闭弹框并重置数据
    onCancel() {
      this.$emit("update:dialogVisibleUse", false);
    },
    // 只有此页面用的列表数据
    // async video_manufacturer() {
    //   const { code, data, msg } = await video_manufacturer();
    //   if (code === 200) {
    //     this.manufacturerList = data;
    //   } else {
    //     this.$message({
    //       message: msg,
    //       type: "error",
    //     });
    //   }
    // },
    // 断面列表数据（目前让某些参数固定以备后续扩展）
    // async segmentList(e) {
    //   const { code, rows, msg } = await segmentList({
    //     IsAuto: "1",
    //     pageNum: "1",
    //     pageSize: "1000",
    //     SegmentCategory: e,
    //   });
    //   if (code === 200) {
    //     this.segList = rows;
    //   } else {
    //     this.$message({
    //       message: msg,
    //       type: "error",
    //     });
    //   }
    // },
    // async selectItemsList() {
    //   const { code, data, msg } = await selectItemsList({
    //     IsRiverEvalute: "1",
    //     ItemCategroy: "0",
    //   });
    //   if (code === 200) {
    //     this.codeList = data;
    //   } else {
    //     this.$message({
    //       message: msg,
    //       type: "error",
    //     });
    //   }
    // },
    // 回显数据
    // async selectChannelById() {
    //   const { state, data, message } = await selectChannelById({
    //     id: this.editDataId,
    //   });
    //   if (state === 1) {
    //     this.$nextTick(() => {
    //       this.dataForm = {
    //         iteminfo: data?.iteminfo || [],
    //         accessinfo: data?.accessinfo || {},
    //         videoinfo: data?.videoinfo || {},
    //       };
    //     });
    //     console.log(this.dataForm, "回显编辑用");
    //   } else {
    //     this.$message({
    //       message: message,
    //       type: "error",
    //     });
    //   }
    // },
    // 登陆测试1
    // async artemisVideoLogin() {
    //   const { code, data, msg } = await artemisVideoLogin({
    //     type: this.dataForm.accessinfo.deviceid,
    //     port: this.dataForm.accessinfo.channelport,
    //     ip: this.dataForm.accessinfo.channelip,
    //     username: this.dataForm.accessinfo.channelname,
    //     password: this.dataForm.accessinfo.channelpassword,
    //   });
    //   if (code === 200) {
    //     this.$message({
    //       message: data,
    //       type: "success",
    //     });
    //   } else {
    //     this.$message({
    //       message: data,
    //       type: "error",
    //     });
    //   }
    // },
    // 国际接入测试
    // async gbVideoPreview() {
    //   const { state, data, message } = await gbVideoPreview({
    //     deviceCode: this.dataForm.accessinfo.devicecode,
    //     channelCode: this.dataForm.accessinfo.channelcode,
    //   });
    //   if (state === 1) {
    //     this.$message({
    //       message: message,
    //       type: "success",
    //     });
    //   } else {
    //     this.$message({
    //       message: message,
    //       type: "error",
    //     });
    //   }
    // },
    // 视频平台接入测试
    // async getVideoPlaform() {
    //   const { state, data, message } = await getVideoPlaform({
    //     type: this.dataForm.accessinfo.deviceid,
    //     host: this.dataForm.accessinfo.host,
    //     appkey: this.dataForm.accessinfo.appkey,
    //     appsecret: this.dataForm.accessinfo.appsecret,
    //   });
    //   if (state === 1) {
    //     this.$message({
    //       message: message,
    //       type: "success",
    //     });
    //   } else {
    //     this.$message({
    //       message: message,
    //       type: "error",
    //     });
    //   }
    // },
  },
};
</script>

<style scoped lang="scss">
.rightMap {
  width: 430px;
  height: 426px;
  display: inline-block;

  margin-left: 10px;
}
.jwd_input {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  width: 100px;
  margin-right: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 32px;
  line-height: 32px;
  outline: 0;
  padding: 0 10px;
}
.jwd_input::placeholder {
  color: rgb(198, 196, 196); /* 你可以更改为任何颜色 */
}
.basic-edit-container {
  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  ::v-deep input[type="number"] {
    -moz-appearance: textfield;
  }
  .baseBox {
    display: flex;
  }
  .expandBox {
    ::v-deep .el-input {
      width: 500px;
    }
    ::v-deep .el-input__inner {
      width: 500px;
    }
  }
  .ingressBox {
    // margin: 0 auto;
    .radioSty {
      margin-left: 25px;
      color: #111;
      ::v-deep .el-radio__label {
        font-size: 15px;
      }
    }
    .same-item-first,
    .same-item-second,
    .same-item-third {
      border-bottom: 1px solid #ccc;
      .same-three {
        display: grid;
        grid-template-columns: 4fr 4fr 2fr;
        gap: 10px;
        ::v-deep .el-input {
          width: 250px;
        }
        ::v-deep .el-input__inner {
          width: 250px;
        }
        ::v-deep .el-form-item {
          width: 120px;
        }
      }
    }
    .same-item-forth {
      .same-two {
        display: grid;
        grid-template-columns: 8fr 2fr;
        gap: 10px;
        .select-width {
          width: 622px;
          ::v-deep .el-input {
            width: 622px;
          }
          ::v-deep .el-input__inner {
            width: 622px;
          }
        }
      }
    }
    .same-item-second,
    .same-item-third,
    .same-item-forth {
      padding-top: 20px;
    }
  }
  .osdBox {
    ::v-deep .el-input {
      width: 500px;
    }
    ::v-deep .el-input__inner {
      width: 500px;
    }
    .form-btn-box {
      padding-left: 60px;
      margin-top: 30px;
    }
  }
  .form-btn-box {
    padding-left: 60px;
    margin-top: 30px;
  }
}
</style>
